<template>
  <!-- 头部 -->
  <div class="public-header flex justify-around pb-16px">
    <div class="flex item-center flex-1">
      <i class="wk wk-leads icon clue-size mr-4px color-#42526e" v-if="pageType == 'clue'"></i>
      <i
        class="wk wk-seas icon clue-size mr-4px color-#42526e"
        v-if="pageType == 'cluePool' || pageType == 'customerPool'"
      ></i>
      <i
        class="wk wk-customer icon clue-size mr-4px color-#42526e"
        v-if="pageType == 'customer'"
      ></i>
      <span class="clue-title mr-4px">{{ sceneFilter[pageType].title }}</span>
    </div>
    <div class="flex item-center justify-end flex-1">
      <el-button
        type="primary"
        color="#0052cc"
        v-hasPermi="[sceneFilter[pageType].createRule]"
        @click="openForm('create')"
        ><el-icon class="mr-4px"><Edit /></el-icon> {{ sceneFilter[pageType].addName }}</el-button
      >
      <el-tooltip class="box-item" effect="dark" content="导入" placement="top-start">
        <el-button
          v-hasPermi="[sceneFilter[pageType].importRule]"
          type="info"
          @click="importData('import')"
        >
          <i class="el-icon wk wk-import !mt-0 s14"></i>
        </el-button>
      </el-tooltip>

      <el-tooltip class="box-item" effect="dark" content="导出" placement="top-start">
        <el-button
          :disabled="exportLoading"
          v-hasPermi="[sceneFilter[pageType].exportRule]"
          type="info"
          @click="importData('export')"
        >
          <i class="el-icon wk wk-export !mt-0 s14"></i>
        </el-button>
      </el-tooltip>
    </div>
  </div>
  <!-- 操作 -->
  <div class="flex item-center pb-16px">
    <el-input
      style="max-width: 200px; height: 32px; flex-shrink: 0"
      v-model.trim="threeInOne"
      :placeholder="sceneFilter[pageType].inputName"
      class="input-with-select"
    >
      <template #append>
        <el-button @click="searchFilter" :icon="Search" />
      </template>
    </el-input>
    <div class="flex item-center ml-24px flex-1">
      <div style="line-height: 32px" class="t-color mr-4px t-color s14">显示:</div>
      <el-select
        v-model="modulesId"
        style=""
        class="w-120px mr-10px"
        placeholder="请选择模块"
        @change="getModuleClueList"
        clearable
      >
        <el-option v-for="item in moduleOption" :key="item.id" :label="item.name" :value="item.id">
        </el-option>
      </el-select>
      <el-button
        v-for="(item, index) in sceneList"
        class="btn-s"
        :key="index"
        @click="selectScene(item.value, item.id, item.params)"
        :class="{ active: sceneSelectId == item.id }"
      >
        {{ item.name }}
      </el-button>

      <el-dropdown trigger="click" size="small">
        <el-button type="info" class="ml-10px">
          <Icon icon="ep:arrow-down" />
        </el-button>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item
              @click="selectScene(it.value, it.id, it.params)"
              v-for="it in otherSceneList"
              :key="it.id"
              class="!p-0"
              style="text-align: center"
            >
              <div :class="{ active: sceneSelectId == it.id }" class="w-100% pt-8px pb-8px">
                {{ it.name }}
              </div>
            </el-dropdown-item>
            <el-dropdown-item style="padding: 8px 15px" @click="setScene">
              <i class="wk wk-manage"></i> 场景设置
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
    <div>
      <el-button type="info" @click="operaIsExpand" v-if="isFilterShow && !isExpand"
        >展开筛选 <el-icon class="ml-5px"><ArrowDown /></el-icon
      ></el-button>
      <el-button
        type="info"
        @click="operaIsExpand"
        style="background-color: #344563"
        v-if="isFilterShow && isExpand"
        >收起筛选 <el-icon class="ml-5px"><ArrowUp /></el-icon
      ></el-button>
      <el-button type="info">
        <div @click="advancedBtn">
          <i class="el-icon wk wk-screening"></i>
          <span class="mr-4px ml-0"> 高级筛选</span>
        </div>
        <div v-if="advanceValueLength">
          <span style="color: #0052cc">{{ advanceValueLength }}</span>
          <el-icon size="12" color="#172b4d" @click="clearAdvance"><Close /></el-icon>
        </div>
      </el-button>
    </div>
  </div>
  <!-- 外露的筛选条件 -->
  <FilterCriteria
    v-if="isExpand && isFilterShow && isLeg"
    :advanceValue="advanceValue"
    :modulesId="modulesId"
    :moduleOption="moduleOption"
    :fieldList="fieldList"
    :tagList="tagList"
    @tellHeight="tellHeight"
    @clearAdvanceValue="clearAdvanceValue"
    @searchAdvance="searchAdvance"
  />
  <!-- 场景设置 -->
  <SceneFormSet ref="sceneRef" @success="getList" />
  <!-- 高级筛选 -->
  <AdvancedScreening
    ref="advanceRef"
    @success="searchAdvance"
    @setIsFilter="setIsFilter"
    :modulesId="modulesId"
    :moduleOption="moduleOption"
    @getFieldList="getFieldList"
    @getTagList="getTagList"
  />
  <!-- 线索：新增、编辑 -->
  <ClueForm ref="clueRef" />
  <!-- 客户：新增、编辑 -->
  <CustomerForm ref="customerRef" />
</template>
<script setup>
import SceneFormSet from '@/views/crm/components/SceneForm/sceneSet.vue'
import AdvancedScreening from '@/views/crm/components/SceneForm/advancedScreening.vue'
import FilterCriteria from '../SceneForm/filterCriteria.vue'
import {
  QuestionFilled,
  Edit,
  DocumentCopy,
  Search,
  ArrowDown,
  ArrowUp,
  Close
} from '@element-plus/icons-vue'
import * as AdvancedQueryApi from '@/api/crm/advancedQuery/index.ts'
import ClueForm from '@/views/crm/clue/ClueForm.vue'
import CustomerForm from '@/views/crm/customer/CustomerForm.vue'

const isLeg = computed(() => {
  return Object.keys(advanceValue.value).length
})
const props = defineProps({
  pageType: String,
  moduleOption: Array,
  isExpand: Boolean,
  isFilterShow: Number,
  exportLoading: Boolean
})
const emit = defineEmits([
  'getModuleClueData',
  'setIsExpand',
  'setIsFilterShow',
  'calculateTable',
  'sceneTypeSearch',
  'paramsSearch',
  'threeSearch',
  'importValue',
  'handleDistributeForm'
])
const tagList = ref([])
const fieldList = ref([])
const advanceRef = ref(null)
const threeInOne = ref('')
const clueRef = ref(null)
const customerRef = ref(null)
const modulesId = ref('')
const sceneSelectId = ref(-1)
const sceneList = ref([])
const otherSceneList = ref([])
const advanceValue = ref({})

const sceneFilter = {
  clue: {
    inputName: '线索名称/手机/电话',
    title: '线索管理',
    addName: '新建线索',
    refValue: clueRef,
    createRule: 'crm:clue:create',
    importRule: 'crm:clue:import',
    exportRule: 'crm:clue:export',
    sceneType: 'crm_clue',
    scene: [
      { name: '全部线索', value: 4, id: -1 },
      { name: '我负责的线索', value: 1, id: -2 },
      { name: '我参与的线索', value: 2, id: -3 },
      { name: '下属负责的线索', value: 3, id: -4 }
    ]
  },
  cluePool: {
    inputName: '线索名称/手机/电话',
    title: '线索池管理',
    addName: '分配线索',
    refValue: clueRef,
    createRule: 'crm:clue:create',
    importRule: 'crm:clue:import',
    exportRule: 'crm:clue:export',
    sceneType: 'crm_clue',
    scene: []
  },
  customer: {
    inputName: '客户名称/手机/电话',
    title: '客户管理',
    addName: '新建客户',
    sceneType: 'crm_customer',
    refValue: customerRef,
    createRule: 'crm:customer:create',
    importRule: 'crm:customer:import',
    exportRule: 'crm:customer:export',
    scene: [
      { name: '全部客户', value: 4, id: -1 },
      { name: '我负责的客户', value: 1, id: -2 },
      { name: '我参与的客户', value: 2, id: -3 },
      { name: '下属负责的客户', value: 3, id: -4 }
    ]
  },
  customerPool: {
    inputName: '客户名称/手机/电话',
    title: '客户公海管理',
    addName: '分配客户',
    sceneType: 'crm_customer',
    scene: [],
    createRule: 'crm:customer:create',
    importRule: 'crm:customer:import',
    exportRule: 'crm:customer:export'
  }
}
/**导入*/
const importData = (val) => {
  emit('importValue', val)
}
/**子组件告诉父组件自己的高度*/
const tellHeight = (val) => {
  emit('calculateTable', val)
}
/**展开收起*/
const operaIsExpand = () => {
  emit('setIsExpand')
}
/**模块请求*/
const getModuleClueList = () => {
  emit('getModuleClueData', modulesId.value)
  if (sceneSelectId.value >= 0) {
    sceneSelectId.value = ''
  }
}
/**高级筛选 key*/
const advanceValueLength = computed(() => {
  if (advanceValue.value.params) {
    return Object.keys(advanceValue.value.params).length
  } else {
    return 0
  }
})
/**标签的option*/
const getTagList = (val) => {
  tagList.value = val
}
/**筛选条件options*/
const getFieldList = (val) => {
  fieldList.value = val
}
/**列表的新增、编辑*/
const openForm = (type, id) => {
  if (props.pageType == 'clue') {
    sceneFilter[props.pageType].refValue.value.open(type, id)
  } else if (props.pageType == 'cluePool') {
    emit('handleDistributeForm', [])
  } else if (props.pageType == 'customer') {
    sceneFilter[props.pageType].refValue.value.open(type, id)
  } else if (props.pageType == 'customerPool') {
    emit('handleDistributeForm', [])
  }
}
/**高级筛选*/
const advancedBtn = () => {
  advanceRef.value.open('create', sceneFilter[props.pageType].sceneType, advanceValue.value)
}
/**清空高级筛选*/
const clearAdvance = () => {
  advanceValue.value = ''
  emit('setIsFilterShow', 0)
  emit('sceneTypeSearch', 4)
}
/**筛选条件的显示隐藏*/
const setIsFilter = (leg) => {
  emit('setIsFilterShow', leg)
}
/**高级筛选过来的值*/
const searchAdvance = (value) => {
  advanceValue.value = value
  sceneSelectId.value = ''
  modulesId.value = ''
  threeInOne.value = ''
  emit('paramsSearch', value.params)
}
/**清除对象的value*/
const clearValues = (obj) => {
  Object.keys(obj).forEach((key) => {
    if (typeof obj[key] === 'object' && obj[key] !== null) {
      if ('value' in obj[key]) {
        obj[key].value = null
      } else {
        clearValues(obj[key])
      }
    }
  })
}
/**清空高级筛选里面的value值*/
const clearAdvanceValue = () => {
  clearValues(advanceValue.value.params)
}
/**场景列表*/
const getList = async () => {
  const res = await AdvancedQueryApi.querySceneList({ page: sceneFilter[props.pageType].sceneType })
  res.forEach((item) => {
    item.value = item.id
  })
  const clueScene = res.filter((item) => item.status == 1)
  const arr1 = []
  otherSceneList.value = []
  for (let i = 0; i < clueScene.length; i++) {
    if (i <= 3) {
      arr1.push(clueScene[i])
    } else {
      otherSceneList.value.push(clueScene[i])
    }
  }
  sceneList.value = [...sceneFilter[props.pageType].scene, ...arr1]
}

watch(
  () => props.pageType,
  (val) => {
    if (val == 'clue' || val == 'cluePool' || val == 'customer' || val == 'customerPool') {
      getList()
    }
  },
  { immediate: true, deep: true }
)

/**选择筛选*/
const selectScene = (value, id, params) => {
  if (id < 0) {
    // 普通搜索的接口
    emit('sceneTypeSearch', value)
  } else {
    // 高级搜索
    modulesId.value = ''
    threeInOne.value = ''
    emit('paramsSearch', JSON.parse(params))
  }
  sceneSelectId.value = id
}
/**三合一的筛选*/
const searchFilter = () => {
  emit('threeSearch', threeInOne.value)
}
const sceneRef = ref(null)
/**设置场景*/
const setScene = () => {
  sceneRef.value.open(sceneFilter[props.pageType].sceneType)
}
</script>

<style scoped lang="scss">
.clue-size {
  font-size: 24px;
  margin-top: 3px;
}
.clue-title {
  font-size: 24px;
  font-weight: bold;
  color: #42526e;
}
.s14 {
  font-size: 14px;
}
.el-icon {
  margin-top: 0 !important;
}
.t-color {
  color: #172b4d;
}
.btn-s {
  border: none;
}
.active {
  background-color: #344563;
  // background-color: #0052cc;
  color: #fff;
}
</style>
